<template>
    <div class="mod-config">
        <el-card shadow="hover">
            <el-divider><i class="el-icon-time"></i></el-divider>
            <el-form :model="attendanceStartTime" :rules="TimeRules" label-width="180px" class="demo-ruleForm" :disabled="attendanceStartTime.paramValue.length>0">
                <el-form-item prop="data" label="上班打卡开始时间:">
                    <el-time-select
                        v-model="attendanceStartTime.paramValue"
                        :picker-options="{
                            start: '06:00',
                            step: '00:15',
                            end: '12:30'
                          }"
                        placeholder="选择上班打卡开始时间">
                    </el-time-select>
                </el-form-item>
            </el-form>
            <div style="height: 20px" v-if="attendanceStartTime.paramValue"></div>
            <el-form :model="attendanceTime" :rules="TimeRules" label-width="180px" class="demo-ruleForm" v-if="attendanceStartTime.paramValue" :disabled="attendanceTime.paramValue.length>0">
                <el-form-item prop="data" label="上班时间:">
                    <el-time-select
                        v-model="attendanceTime.paramValue"
                        :picker-options="{
                            start: addFifteenMinutes(attendanceStartTime.paramValue),
                            step: '00:15',
                            end: '12:30'
                          }"
                        placeholder="选择上班时间">
                    </el-time-select>
                </el-form-item>
            </el-form>
            <div style="height: 20px" v-if="attendanceTime.paramValue"></div>
            <el-form :model="attendanceEndTime" :rules="TimeRules" label-width="180px" class="demo-ruleForm" v-if="attendanceTime.paramValue" :disabled="attendanceEndTime.paramValue.length>0">
                <el-form-item prop="data" label="上班打卡截至时间:">
                    <el-time-select
                        v-model="attendanceEndTime.paramValue"
                        :picker-options="{
                            start: addFifteenMinutes(attendanceTime.paramValue),
                            step: '00:15',
                            end: '12:30'
                          }"
                        placeholder="选择上班打卡截至时间">
                    </el-time-select>
                </el-form-item>
            </el-form>
            <div style="height: 20px" v-if="attendanceEndTime.paramValue"></div>
            <el-form :model="closingStartTime" :rules="TimeRules" label-width="180px" class="demo-ruleForm" v-if="attendanceEndTime.paramValue" :disabled="closingStartTime.paramValue.length>0">
                <el-form-item prop="data" label="下班开始打卡开始时间:">
                    <el-time-select
                        v-model="closingStartTime.paramValue"
                        :picker-options="{
                            start: '13:00',
                            step: '00:15',
                            end: '23:30'
                          }"
                        placeholder="选择下班开始打卡开始时间">
                    </el-time-select>
                </el-form-item>
            </el-form>
            <div style="height: 20px" v-if="closingStartTime.paramValue"></div>
            <el-form :model="closingTime" :rules="TimeRules" label-width="180px" class="demo-ruleForm" v-if="closingStartTime.paramValue" :disabled="closingTime.paramValue.length>0">
                <el-form-item prop="data" label="下班时间">
                    <el-time-select
                        v-model="closingTime.paramValue"
                        :picker-options="{
                            start: addFifteenMinutes(closingStartTime.paramValue),
                            step: '00:15',
                            end: '23:30'
                          }"
                        placeholder="选择下班时间">
                    </el-time-select>
                </el-form-item>
            </el-form>
            <div style="height: 20px" v-if="closingTime.paramValue"></div>
            <el-form :model="closingEndTime" :rules="TimeRules" label-width="180px" class="demo-ruleForm" v-if="closingTime.paramValue" :disabled="closingEndTime.paramValue.length>0">
                <el-form-item prop="data" label="下班打卡截至时间">
                    <el-time-select
                        v-model="closingEndTime.paramValue"
                        :picker-options="{
                            start: addFifteenMinutes(closingTime.paramValue),
                            step: '00:15',
                            end: '23:30'
                          }"
                        placeholder="选择下班打卡截至时间">
                    </el-time-select>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" style="text-align: center;" v-if="
            attendanceStartTime.paramValue.length>0
            && attendanceTime.paramValue.length>0
            && attendanceEndTime.paramValue.length>0
            && closingStartTime.paramValue.length>0
            && closingTime.paramValue.length>0
            && closingEndTime.paramValue.length>0">
                <el-button type="danger" @click="resetForm">重 置</el-button>
                <el-button type="primary" @click="submitForm">提 交</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
import dayjs from "dayjs";

export default {
    data() {
        return {
            attendanceStartTime:{
                id:1,
                paramKey:'attendance_start_time',
                paramValue:''
            },
            attendanceTime:{
                id:2,
                paramKey:'attendance_time',
                paramValue:''
            },
            attendanceEndTime:{
                id:3,
                paramKey:'attendance_end_time',
                paramValue:''
            },
            closingStartTime:{
                id:4,
                paramKey:'closing_start_time',
                paramValue:''
            },
            closingTime:{
                id:5,
                paramKey:'closing_time',
                paramValue:''
            },
            closingEndTime:{
                id:6,
                paramKey:'closing_end_time',
                paramValue:''
            },
            TimeRules: {
                paramValue: [
                    { required: true, message: '请输入参数值', trigger: 'blur' },
                ]
            },
        }
    },
    mounted() {
        this.loadData();
    },
    methods: {
        dayjs,
        // 增加15分钟
        addFifteenMinutes(timeStr) {
            // 分割时间字符串
            const [hours, minutes] = timeStr.split(':').map(Number);
            // 计算新的分钟数
            let newMinutes = (minutes + 15) % 60;
            // 如果分钟超过59，需要增加小时数
            let newHours = hours + Math.floor((minutes + 15) / 60);
            // 确保小时数不超过23
            newHours = newHours % 24;
            // 返回格式化后的时间字符串
            return `${newHours.toString().padStart(2, '0')}:${newMinutes.toString().padStart(2, '0')}`;
        },
        //批量加载特殊考勤相关数据
        loadData(){
            let that = this;
            that.$http('/attendance/sys','POST',{
                ids:[1,2,3,4,5,6]
            },(resp)=>{
                let data = resp.data;
                if(data.code === 20000){
                    let list = data.data;
                    for (let e of list) {
                        if(e.id === 1){
                            that.attendanceStartTime.paramValue = e.paramValue;
                        }else if(e.id === 2){
                            that.attendanceTime.paramValue = e.paramValue;
                        }else if(e.id === 3){
                            that.attendanceEndTime.paramValue = e.paramValue;
                        }else if(e.id === 4){
                           that.closingStartTime.paramValue = e.paramValue;
                        }else if(e.id === 5){
                            that.closingTime.paramValue = e.paramValue;
                        }else if(e.id === 6){
                            that.closingEndTime.paramValue = e.paramValue;
                        }
                    }
                }
            })
        },
        //重置
        resetForm(){
            this.$confirm('确定重置吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                //重置paramValue
                this.$http('/attendance/reset','PUT',{
                    ids:[1,2,3,4,5,6]
                },(resp)=>{
                    let data = resp.data;
                    if(data.code === 20000){
                        this.$message({
                            type: 'success',
                            message: '重置成功'
                        });
                        this.loadData();
                    }else{
                        this.$message({
                            type: 'error',
                            message: data.msg
                        });
                    }
                })
            }).catch(()=>{})
        },
        //提交
        submitForm() {
            let that = this;
            that.$confirm('确定提交吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                that.$http('/attendance/setSys','PUT',{
                    ids:[1,2,3,4,5,6],
                    attendanceStartTime:that.attendanceStartTime.paramValue,
                    attendanceTime:that.attendanceTime.paramValue,
                    attendanceEndTime:that.attendanceEndTime.paramValue,
                    closingStartTime:that.closingStartTime.paramValue,
                    closingTime:that.closingTime.paramValue,
                    closingEndTime:that.closingEndTime.paramValue
                },(resp)=>{
                    let data = resp.data;
                    if(data.code === 20000){
                        that.$message({
                            type: 'success',
                            message: '提交成功'
                        });
                        that.loadData();
                    }else{
                        that.$message({
                            type: 'error',
                            message: data.msg
                        });
                    }
                })
            }).catch(()=>{

            })
        },
    }
}
</script>
<style lang="less">
.table {
  margin-top: 20px;
}
</style>